import { memo } from "react";
import { Button, Divider } from "antd";
import { IconFont } from "@/Utils/iconFont";
import { ArrowRightOutlined } from "@ant-design/icons";
export const CompreSection = memo(() => {
  const tabs = [
    {
      label: "编程",
      value: "code",
      icon: <IconFont type="icon-code" />,
      bgColor: "#e6f4ff"
    },
    {
      label: "问答",
      value: "qa",
      icon: <IconFont type="icon-wenda" />,
      bgColor: "#e6fffb"
    },
    {
      label: "写作",
      value: "write",
      icon: <IconFont type="icon-write" />,
      bgColor: "#f9f0ff"
    },
    {
      label: "草稿",
      value: "creator",
      icon: <IconFont type="icon-caogao" />,
      bgColor: "#e6e6e6"
    },
  ]


  return (
    <div className="bg-white rounded-xl shadow-sm p-6 mb-4">
      <div className="flex items-center justify-between text-gray-500 text-sm">
        <span>创作者中心</span>
        <span className="flex items-center gap-1 mr-2 hover:text-blue-600">
          <span className="cursor-pointer mr-2">进入创作者中心</span>
          <ArrowRightOutlined />
        </span>
      </div>
      <Divider style={{ margin: "10px 0" }} />
      {/* 编程,问答,写作,草稿 */}
      <div className="flex items-center justify-around">
        {tabs.map((tab) => (
          <div key={tab.value} className="flex items-center justify-between cursor-pointer">
            <div className="flex items-center gap-2 flex-col">
              <div className="w-12 h-12 rounded-full text-2xl flex items-center justify-center mt-2" style={{ backgroundColor: tab.bgColor }}>{tab.icon}</div>
              <div className="text-sm mt-2">{tab.label}</div>
            </div>
          </div>
        ))}
      </div>
      {/* 广告区域 */}
      <div className="mt-2 bg-[#f3f4f6] w-full rounded-xl cursor-pointer">
        <img src="https://gw.alipayobjects.com/zos/bmw-prod/1c363c0b-17c6-4b00-881a-bc774df1ebeb.svg" alt="" />
      </div>
      {/* 登录 */}
      <Button className="w-full mt-4"> 登录</Button>
    </div>
  )
})
CompreSection.displayName = "CompreSection"